@import './reset';
@import './setting';
@import './flex';
@import './bottomTab';

@function getvw($w) {
    @return calc($w / 375) * 100+vw;
}

.container {
    width: getvw(375);
    @extend %columnCenter;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    height: 100%;

    header {
        width: 100%;
        background-color: #ffffff;
        @extend %center;

        nav {
            a {
                display: block;
                width: getvw(356);
                border-bottom: 2px solid #F1F3F6;
                position: relative;

                i {
                    position: absolute;
                    left: getvw(20);
                    top: 51%;
                    transform: translateY(-50%);
                    font-size: getvw(15);
                    color: #71797F;
                }

                .search {
                    background-color: #F3F5F7;
                    border-radius: getvw(42);
                    border: none;
                    width: 100%;
                    height: getvw(35);
                    margin: getvw(7) auto getvw(5);
                    padding: 0 getvw(42);
                    font-size: getvw(14);
                    font-weight: 400;
                    line-height: getvw(35);
                    color: #71797F;
                    box-sizing: border-box;
                    outline: none;
                }
            }
        }
    }

    main {
        display: flex;
        width: 100%;
        height: 100%;
        // background-color: red;

        section {
            padding-bottom: getvw(51);
            height: 100%;

            &:first-child {
                border-right: 1px solid #E9ECF0;
                width: getvw(80);
                box-sizing: border-box;
                padding-bottom: getvw(50);
                // background-color: blue;
            }

            &:last-child {
                width: getvw(295);
                overflow-y: auto;
            }

            .content_Left {
                width: 100%;

                ul {
                    li {
                        a {
                            box-sizing: border-box;
                            padding: getvw(11) getvw(5);
                            display: block;
                            height: getvw(40);
                            margin: getvw(15) 0;
                            color: #333333;
                            font-size: getvw(14);
                            font-weight: 400;
                            text-align: center;
                            border-left: 2px solid transparent;
                        }
                    }

                    .active {
                        a {
                            border-color: $themColor;
                            color: $themColor;
                        }
                    }
                }
            }

            .content_Right {
                @extend %columnCenter;
                padding-top: getvw(9);
                padding-bottom: getvw(184);
                width: 100%;

                img {
                    width: getvw(272);
                    margin-bottom: getvw(15);
                }

                .rightBox {
                    width: getvw(272);
                    box-shadow: 0 getvw(2) getvw(4) 0 #00000020;



                    p {
                        color: #555555;
                        font-size: getvw(16);
                        font-weight: 600;
                        margin: getvw(7) 0 getvw(6);
                    }

                    ul {
                        margin-bottom: getvw(10);
                        width: 100%;
                        // background-color: pink;
                        display: flex;
                        flex-wrap: wrap;

                        li {
                            a {
                                display: block;
                                width: getvw(106);
                                margin: getvw(10) 0 getvw(10) getvw(20);
                                color: #666666;
                                font-size: getvw(14);
                                font-weight: 400;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
}